﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>User Menu</title>
    <style>
        span{
            color:#c1b2b2;
            font-weight:bold;
            padding:3px;
}

        input{
          color: #c1b2b2;
          border-radius:4px;
          padding:5px;
          width:225px;
          margin:5px;
}

        a{
        color:#0ff;
}
        #submit{
        color:#fff;
        width:100px;
        background-color:#137ea7;
        border:none;
        margin:10px;
}

        ul{
        list-style-type:none;
        color:#808080;
}

        li{
        border-bottom:2px solid #808080;
        display:inline;
}

        .menu{
        border-bottom:1px solid #c1b2b2;
        display:inline;
        }

        table td{
        border-bottom:1px solid #eae7e7;
        color:#c1b2b2;
}

        img {
        width:35px;
        height:30px;
}
        .button{
        
        width:30px;
        height:30px;
        background-color:#377bc4;
        color:#fff;
}

        .img1{
            margin-bottom:25px;
            margin-right:-85px;
            padding-right:30px;
            padding-left:30px
}
        .img2{
            margin-bottom:25px;
            margin-right:-70px;
            padding-right:30px;
            padding-left:30px
}

    </style>
</head>
    <body>

    <div>
        <span>LOGIN</span>
        <br />
        <input type="text" name="userName" value="Username "id="userName" />
         <br />
        <input type="text" name="password" value="Password"id="pass" />
        <br/>
        <a href="#">Password recovery</a>
        <input type="submit" name="name" value="Login" id="submit"/>
    </div>
        <br />
        <br />

    <table>
        <tr>
            <td> <img src="images/dashBoard.jpg" alt="Alternate Text" />DashBoard</td>
        </tr>
        <tr>
            <td><img src="images/table.jpg" alt="Tables Image" />Tables</td>
        </tr>
        <tr>
            <td><img src="images/forms.jpg" alt="Forms Image" />Forms</td>
        </tr>
        <tr>
            <td><img src="images/widget.jpeg" alt="Widgets Image" />Widgets</td>
        </tr>
        <tr>
            <td><img src="images/slider.jpg" alt="Sliders Image" />Sliders, loaders</td>
        </tr>
        <tr>
            <td><img src="images/tabs.jpg" alt="Tabs Image" />Tabs, Accordions<span class="align"><input type="button" name="name" value="2" class="button" /></span></td>
        </tr>
        <tr>
            <td><img src="images/messages.png" alt="Messages Image" />Messages</td>
        </tr>
        <tr>
            <td><img src="images/icon.jpg" alt="Icons Image" />Icons, buttons<span class="align"><input type="button" name="name" value="33" class="button" /></span></td>
        </tr>
        <tr>
            <td><img src="images/files.png" alt="File Image" />File Manager</td>
        </tr>
        <tr>
            <td><img src="images/contacts.jpg" alt="Contacts Image" />Contacts</td>
        </tr>
        <tr>
            <td><img src="images/grids.jpg" alt="Grids Image" />Grids</td>
        </tr>
        <tr>
            <td><img src="images/typography.jpg" alt="Typography Image" />Typography</td>
        </tr>
        <tr>
            <td><img src="images/404-error-page.jpg" alt="Erros Image" />Errors</td>
        </tr>   
    </table>

        <br />
        <br />
        <span><img class="img1" src="images/dashBoard.jpg" alt="Alternate Text" />DashBoard</span>
        <span><img class="img2" src="images/dashBoard.jpg" alt="Alternate Text" />Tasks</span>
        <span><img class="img2" src="images/dashBoard.jpg" alt="Alternate Text" />Users</span>
        <span><img class="img2" src="images/dashBoard.jpg" alt="Alternate Text" />Reports</span>
        <span><img class="img1" src="images/dashBoard.jpg" alt="Alternate Text" />ErrorPages</span>

</body>

</html>
